keen

您所在的位置：网站首页 › whisper mode未准备就绪 › keen

keen

#keen| 来源: 网络整理| 查看: 265

背景

在日常的工作中，有很多卡片滑动的需求。如：弹窗广告位、分享弹窗、卡片动画等。

之前尝试过Swiper，但是感觉这个库有点大...

选择keen-slider的原因 1. 体积小 keen-slider打包压缩后的大小为28kb。而swiper打包压缩后的体积有364kb。

2. 文档易于阅读

keen-slider.io/examples

swiperjs.com/react#usage…

3. 依赖的第三方库 keen-slider 只依赖React，升级，兼容性会比较好 keen-slider的使用

keen-slider中提供了一个hook供react使用。像所有react hook一样，useKeenSlider 只能在组件的顶层被调用（不能写在if else中）。接收两个参数，Options（第一个参数）、Plugins（第二个参数）。调用 useKeenSlider 返回一个数组。数组的第一个元素是绑定在 slider 容器上的回调函数，第二个元素是幻灯片的实例，或者说是包含了幻灯片的具体属性的变量。

import React from 'react' import 'keen-slider/keen-slider.min.css' import { useKeenSlider } from 'keen-slider/react' // import from 'keen-slider/react.es' for to get an ES module export default () => { // 1. 第一个参数最终绑定在了 keen-slider 的最外层 // 2. 通过第二个参数可以 slider 可以访问 slider 实例 const [refCallback, slider] = useKeenSlider( // Options { rtl: true, slideChanged() { console.log('slide changed') }, }, // Plugins [ // add plugins here ] ) return ( 1 2 3 ) } 复制代码 keen-slider的Options属性

你可以通过传递Options（其中包括了一些事件钩子），来定制不同效果的幻灯片。如果你想在初始化之后改变配置，你可以调用 update 方法来实现。

1. breakpoints:object

在某个特定的条件下，覆盖options和Event hooks的属性值。每个特定条件必须是媒体查询的字符串。比如 (orientation: portrait) and (min-width: 500px) 。注意：如果多个媒体查询同时生效，那么已最后一次的为准。

new KeenSlider('#my-slider', { loop: true, breakpoints: { // 当宽度小于500px的时候，loop属性变为 false。 '(min-width: 500px)': { loop: false, }, }, }) 复制代码

官方breakpoint例子

2. defaultAnimation:object

为next、 prev、moveToIdx操作设置动画函数。

duration: number - 动画的持续时间(毫秒) easing: function - 变化函数 (time: number) => number 3. disabled: boolean

如果这个属性为true，滑块就被禁用了。任何事件和样式都不会失效。默认值为false。

4. drag: boolean

开启或关闭mouse和touch事件的响应。默认为true。

5. dragSpeed: number | function

设置被拖拽时候的移动速度。可以是一个特定的数字，也可以是一个函数。负值会反转滑动方向。默认值为1

6. initial: number

设置幻灯片的初始索引。默认值为1（下标从1开始）。

7.loop: boolean | object

启用/禁用幻灯片的循环模式。当然，你也可以传递min、max指定循环的次数。

8. mode: 'snap' | 'free' | 'free-snap'

设置拖拽结束后的动画模式。默认为snap

9. range: object

无论视口中包括了几个滑块, 你都可以指定可访问的滑块。

min: number: 设置最小可访问的下标 max:number:设置最大可访问的下标 align:boolean: 将最大位置对齐到最后一个 slider 的末尾 10. renderMode: 'precision' | 'preformance' | 'custom'

如果你的 slider 带有一些复杂的标记和CSS，那么浏览器的呈现性能可能会变慢。为了解决这个问题，您可以将此选项设置为performance。如果你想创建自己的渲染器，你可以将这个选项设置为custom。默认设置是precision。

11. rtl: boolean

改变滑块的展示位置。将从左到右改成从右到左。默认值为false

12. rubberband: boolean

启用或禁用滑块拖动行为和拖动后的动画。默认是true。

13. selector: string | HTMLElement[] | NodeList | function | null

指定如何接收来自DOM的滑块。可以是 css 选择器、HTMLElements的集合、获取containers的函数、null。如果你不希望滑块定位或缩放幻灯片，可以将该属性设置为null。

14. slides: object | number | function | null

指定幻灯片的配置。每次更新、调整大小或更改配置时，幻灯片配置都会更新。因此，再次调用所有函数。默认为null。

number - 将幻灯片的数量设置为指定的数量。

object - 该对象用于指定幻灯片配置。

origin: 'auto' | 'center' | 'number' - 设置滑块的原点。

auto: 调整所有幻灯片的原点，使第一张幻灯片向左对齐，最后一张幻灯片向右对齐。

center：将所有幻灯片居中。

number: 相对于视口???

number: number | function | null - 如果值为数字或null，则与幻灯片类似。也可以是一个返回数字或null的函数。默认为空。

perView: number | function | 'auto' - 确定幻灯片应与视口/容器相关的大小。如果设置为自动，则基于相应的HTML元素的大小确定幻灯片尺寸。因此，选择器选项不得为空。也可以是一个函数，返回数字或'auto'。默认为1。

spacing: number | function -以像素定义幻灯片之间的间距。可以是一个返回数字的函数。默认值为0。

function - 使用返回幻灯片配置数组的函数指定幻灯片配置。幻灯片配置具有以下可选属性。

origin: number - 确定幻灯片的原点在视口中的位置。默认值为 0。 size: number - 确定幻灯片相对于视口的相对大小。默认值为1。 spacing: number - 确定与一个滑块的距离。默认为0.

函数的第一个参数是容器的大小，第二个参数是HTML元素数组的幻灯片。

null - 滑块的样式将由`selector属性确定。 15. vertical: boolean

将滑块的方向从水平更改为垂直。默认值为false。

事件函数（Event Hooks）

事件钩子是滑块在其生命周期中调用的函数。函数获取Properties作为唯一的参数。事件钩子是Option参数（useKeenSlider的第一个参数）的一部分。以下是触发的事件函数。

1. animationStarted

动画开始时调用的声明周期函数。动画发生在拖动结束后或当调用moveToIdx() 或者 animator.start()时触发。

2. animationStop

动画停止时调用。

3. animationEnded

动画结束时调用。

4. created

滑块被创建时调用。

5. destroyed

滑块被销毁时调用

6. detailsChanged

当 details 属性变化时触发。每次移动滑块，或者幻灯片的配置有变动，初始化或改变大小后都会触发。

7. dragged

滑块被拖动的时候调用。

8. dragStarted

滑块开始拖动时调用。

9. dragChecked

拖动的方向是check过的，并且是有效的。

10. dragEnded

滑块开始拖动结束时调用。

11. optionsChanged

幻灯片的配置发生了变化，例如由于更新、调整大小(当幻灯片的数量发生变化时)或breakpoints的变化。

12. slideChanged

当前的滑块或大多数的滑块都发生了变化时候触发。

13. updated

由于尺寸变化或其他变化导致 update 函数被触发的时候会调用。

方法 && 属性

无论滑块是通过react hook还是普通的javascript创建的，它都会返回一个实例或一个属性对象来进行进一步的操作。下面描述了这些属性。

Animator:object

animator 是负责轨迹的运动动画的模块。它具有以下属性：

active: boolean - 指示动画是否处于运行状态。

start: function - 开始一个新的动画。需要一个关键帧数组。关键帧按顺序处理。

slider.animator.start([keyframe1, keyframe2]) 复制代码

一个keyframe包含以下属性：

distance: number - 动画中的移动距离。 duration: number - 动画的持续时间(毫秒)。 earlyExit: number - 可选地设置一个更早的关键帧终止。 easing: function - 动画函数 (time: number) => number。

stop: function - 停止当前活动的动画(如果有的话)。

targetIdx: number | null - 在动画结束时处于active状态的索引。

container: HTMLElement

HTML元素，幻灯片的容器。

destroy: function

销毁函数，当被调用时销毁滑动块，所有事件和应用样式将被移除。

on: function slider.on(eventName, callback, remove) 复制代码

调用时注册一个事件钩子。

eventName: string - 指定事件名称。 callback: function - 当这个事件被触发了，该函数会被执行。 remove: boolean - 是否应该设置或删除函数。默认是false。 emit: function slider.emit(eventName) 复制代码

调用时发出事件。需要一个eventName: string作为参数。

moveToIdx: function slider.moveToIdx(index, absolute, animation) 复制代码

调用时用动画更改 active 的幻灯片。

index: number - 指定 active 的滑块下标 absolute: boolean - 定义索引是否为绝对值。默认是 false。 animation: object - 修改默认动画。对象可以具有以下属性 duration: number - 设置动画持续时间为毫秒。默认是500。 easing: function - 设置缓和函数。默认是 t => 1 +——t * t * t * t。 next: function

调用时将当前 active 的幻灯片更改为前一个(如果存在的话)。

prev: function

调用时将当前 active 的幻灯片更改为后一个(如果存在的话)。

size: number

视口的宽度/高，取决于该幻灯片是横/竖排列的。

slides: HTMLElement[]

幻灯片作为HTML元素的数组。

track: object

absToRel: function - 将绝对索引转换为相应的相对索引。

add: function - 将传递的值添加到跟踪位置。

details: object | null - 当前滑块的位置，长度，尺寸和距离相对于容器/视口大小。如果滑块被禁用或未准备就绪，则设置为null。

abs: number - active 滑块的绝对下标。 length: number - 当前滑块长度与视口大小的关系???。 min: number - 根据range/loop变量计算出的最小位置。 max: number - 根据range/loop变量计算出的最大位置。 minIdx: number - 根据range/loop变量计算出的最小下标。 maxIdx: number - 根据range/loop变量计算出的最大下标。 position: number - 根据range/loop变量计算出的的当前位置。 progress: number - 滑块与长度的相对位置。 rel: number - 当前active滑块的相对索引。 slides: array - 作为对象数组的每个滑块的详细信息。每个对象具有以下属性。 abs: number - active 滑块的绝对下标。 distance: number - 滑块到视口开始的距离。 portion: number - 表示视口中可见的幻灯片是多少。 size: number - 滑块相对于视口的大小。 distToIdx: function - 将传递的距离转换为相应的索引。 idxToDist: function - 返回传递的索引的距离。第二个参数是可选的，它是一个布尔值，指定传入的索引是否为绝对值。第三个参数是可选的，用于指定引用位置。 init: function - 重新初始化轨道。可以在这里重新设置 active 滑块。 to: function - 将传递的值设置为滑块位置。 velocity: function - 返回滑块的当前速度。 update: function slider.update(options, idx) 复制代码

如果触发调整大小或需要更改配置，可以调用update 函数, 强行更新幻灯片。

options: object - 指定滑动块应被重新初始化的新配置。默认值 undefined。 idx: number - 将当前活动幻灯片设置为给定索引。默认为 undefined。内置的CSS属性 data-keen-slider-clickable - 将此属性设置在每个滑块上，可以组织滑块上的触摸/单击事件。 data-keen-slider-scrollable - 将此属性设置在每个滑块上，允许滑块在水平/垂直方向上滑动。overflow需要设置成scroll。 keen-slider中的插件

为了使自定义滑块函数的集成、结构和版本更容易，你可以创建插件。Keen-Slider本身也部分基于插件。

插件本质上是一个函数，它接收滑块实例作为其唯一参数，并在滑块启动期间初始化。使用 on 和 emit 函数可以在幻灯片的声明周期函数中做一些事情。

扩展拖控件

如果你想扩展滑块的拖动控件，你可以发出自定义事件ksDragStart, ksDrag和ksDragEnd的位置，官方例子。

实现一个h5轮播弹窗

1. 引入相关依赖

这里以 React + TS 为例。

import * as React from "react"; import "keen-slider/keen-slider.min.css"; import "./styles.css"; import { useKeenSlider, TrackDetails } from "keen-slider/react"; 复制代码 2. 使用 useKeenSlider 创建实例 const [details, setDetails] = React.useState(null); const [sliderRef] = useKeenSlider({ loop: true, detailsChanged(s) { setDetails(s.track.details); }, initial: 2, slides: { origin: "center", perView: 2, spacing: 0 } }); 复制代码 3. 将 sliderRef 挂载特定的 DOM 上 {images.map((src, idx) => ( ))} 复制代码 4. 在滑动过程中，控制滑块的大小

写一个 scaleStyle 函数，实时回去滑动过程中的参数。

在线demo

【本文地址】

公司简介

联系我们